<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>相书保险</title>
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <script src="js/libs/vue2.0.js"></script>
    <script src="js/project.js"></script>
    <style>
        body{background-color: #f2f3f8;padding-top: 44px;}
        /* 顶部区域,布局样式以.g-开头 */
        .g-top{ position:relative;padding:35px 15px 20px;text-align: center; }
        /* 下拉框 */
        .f-select{position:absolute;right:10px;top:8px;display: inline-block;border: solid 1px #d6d8e0;padding: 0 23px 0 9px; border-radius: 4px;background-color: #fff;}
        .f-select:after{    content: " ";  display: inline-block;  -webkit-transform: rotate(135deg);  transform: rotate(135deg);  height: 6px;  width: 6px;  border-width: 2px 2px 0 0;  border-color: #007de2;  border-style: solid;  position: absolute;  top: 7px;  right: 9px;  }
        .f-select .weui_select{height: 24px; line-height: 24px;color: #007de2; padding: 0;}

        /* 表格 */
        .dropdown-menu .weui_cells{padding: 10px 15px;}
        .dropdown-menu .weui_cell{height: 40px;}
        .dropdown-menu .weui_cell div{white-space: nowrap;}
        .dropdown-menu .weui_cell:before{display: block;}
        .dropdown-menu .weui_cells .weui_cell:first-of-type::before{display: none;}
        .dropdown-menu .weui_cell_hd{width: 60px;text-align: center;}
        .dropdown-menu .weui_cell_bd{text-align: center;}
        .dropdown-menu .weui_cell_ft{display:inline-block;width: 30px;text-align: center;font-size: 15px;color: #007de2;}
        .tab-head, .tab-foot{font-size: 15px;color: #333;}


    </style>

</head>
<body>
<div id="app">
    <header class="fixed_top">
        <div class="header_left back">
            <i class="iconfont icon-back"></i>
        </div>
        <div class="header_title">我的学校</div>
        <div class="header_right more">
            <i class="iconfont icon-more"></i>
        </div>
    </header>

    <div v-if="schoolData.totalNum > 0">
        <div class="g-top">
            <!--<div class="f-select weui_cell_select">
                <select class="weui_select" name="select1">
                    <option v-for="item in semesters" :value="item.value">{{item.label}}</option>
                </select>
            </div>-->
            <h4 style="font-size: 18px;color: #333;line-height: 1.3;">{{schoolData.schoolName}}</h4>
            <p style="font-size: 14px;color: #68709a;">总投保({{schoolData.totalNum}}人)</p>
        </div>
        <!-- 手风琴 -->
        <ul id="accordion" class="accordion">
            <li v-for="(grade, index) in schoolData.grades" class="dropdown" :class="{'hide': index, 'show':!index }">
                <div data-toggle="dropdown">{{grade.grade}}<i class="iconfont icon-fangxiangshang"></i></div>
                <div class="dropdown-menu" >
                    <div class="weui_cells">

                        <!-- 表头 -->
                        <div class="weui_cell tab-head">
                            <div class="weui_cell_hd">班级</div>
                            <div class="weui_cell_bd weui_cell_primary">已投保(人)</div>
                            <div class="weui_cell_bd weui_cell_primary">总保费(元)</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                        <!-- 表正文 -->
                        <template v-for="item in grade.classes">
                            <div class="weui_cell tab-body">
                                <div class="weui_cell_hd">{{item.className}}</div>
                                <div class="weui_cell_bd weui_cell_primary">{{item.num}}</div>
                                <div class="weui_cell_bd weui_cell_primary">￥{{item.amount}}</div>
                                <div class="weui_cell_ft" @click="jumpToDetail(item.classId)">详情</div>
                            </div>
                        </template>
                        <!-- 表底foot -->
                        <div class="weui_cell tab-foot">
                            <div class="weui_cell_hd">总数</div>
                            <div class="weui_cell_bd weui_cell_primary">{{grade.totalNum}}</div>
                            <div class="weui_cell_bd weui_cell_primary">￥{{grade.amount}}</div>
                            <div class="weui_cell_ft"></div>
                        </div>
                    </div>

                </div>
            </li>
        </ul>

        <a onclick="sendToEmail()" class="weui_btn" style="margin: 30px 10px;">发送表格到邮箱</a>

    </div>

    <div v-else>
        <div style="text-align: center;padding: 20px;">
            <img width="163" height="170" src="./images/status_1.png" alt="">
            <p style="font-size: 16px;line-height:36px;color: #333;">还没有购买记录哦~</p>
        </div>
    </div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                /* 各年级各班级购买情况 */
                schoolData: {
                    schoolName:'华师附中',
                    totalNum:2888,
                    grades: [
                        {
                            grade:'一年级',
                            totalNum:60,
                            amount:4888,
                            classes: [
                                {
                                    classId:'xxxxxxxx',
                                    className: '一(1)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '一(2)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '一(3)班',
                                    num: 20,
                                    amount:1234
                                }
                            ]
                        },
                        {
                            grade:'二年级',
                            totalNum:60,
                            amount:4888,
                            classes: [
                                {
                                    classId:'xxxxxxxx',
                                    className: '二(1)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '二(2)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '二(3)班',
                                    num: 20,
                                    amount:1234
                                }
                            ]
                        },
                        {
                            grade:'三年级',
                            totalNum:60,
                            amount:4888,
                            classes: [
                                {
                                    classId:'xxxxxxxx',
                                    className: '三(1)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '三(2)班',
                                    num: 20,
                                    amount:1234
                                },
                                {
                                    classId:'xxxxxxxx',
                                    className: '三(3)班',
                                    num: 20,
                                    amount:1234
                                }
                            ]
                        }
                    ]
                }
            }
        },
        methods: {
            /* 跳转到班级详情 */
            jumpToDetail: function (id) {
                console.log("班级的id为"+ id);
                window.location.href = 'classDetails.html';
            }
        },
        created: function () {

        }
    });

    /* 发送到邮箱 */
    function sendToEmail() {
        $.prompt({
            title: '填写邮箱',
            empty: false, // 是否允许为空
            onOK: function (input) {
                if(!isEmail(input)){
                    showInfo('您输入的邮箱有误,请重新输入','text');
                    return false
                }
                //点击确认
            },
            onCancel: function () {
                //点击取消
            }
        });
    }
</script>

</body>
</html>